<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员后台 - 学籍管理系统</title>
    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome for icons (optional) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!-- Chart.js (本地) -->
    <script src="js/chart.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            display: flex;
        }
        .sidebar {
            min-width: 250px;
            max-width: 250px;
            background: #343a40;
            color: #fff;
            min-height: 100vh;
            transition: all 0.3s;
        }
        .sidebar.toggled {
            margin-left: -250px;
        }
        .sidebar .nav-link {
            color: rgba(255,255,255,.8);
        }
        .sidebar .nav-link:hover {
            color: #fff;
            background: #495057;
        }
        .sidebar .nav-link.active {
            color: #fff;
            background: #007bff;
        }
        .sidebar-header {
            padding: 1.5rem;
            text-align: center;
            background: #007bff;
        }
        .sidebar-header h3 {
            margin-bottom: 0;
        }
        .content {
            width: 100%;
            padding: 20px;
            transition: all 0.3s;
        }
        /* Simple responsive toggle button */
        #sidebarCollapse {
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 1000;
        }
        @media (max-width: 768px) {
            .sidebar {
                margin-left: -250px;
            }
            .sidebar.toggled {
                margin-left: 0;
            }
            #sidebarCollapse {
                 display: block !important; /* Make sure it shows on mobile */
            }
        }
    </style>
</head>
<body>
    <!-- Toast Container -->
    <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px; z-index: 1050;">
        <div id="toastContainer" style="position: absolute; top: 1rem; right: 1rem;">
            <!-- Toasts will be appended here -->
        </div>
    </div>

    <nav class="sidebar bg-dark" id="adminSidebar">
        <div class="sidebar-header">
            <h3>管理员后台</h3>
        </div>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#" data-target="dashboard-content"><i class="fas fa-tachometer-alt mr-2"></i>仪表盘</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-target="exam-management-content"><i class="fas fa-file-alt mr-2"></i>考试管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-target="class-management-content"><i class="fas fa-users-cog mr-2"></i>班级管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-target="grade-management-content"><i class="fas fa-graduation-cap mr-2"></i>成绩管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-target="student-management-content"><i class="fas fa-user-graduate mr-2"></i>学生管理</a>
            </li>
            <li class="nav-item mt-auto">
                <a class="nav-link" href="#" id="logoutButton"><i class="fas fa-sign-out-alt mr-2"></i>退出登录</a>
            </li>
        </ul>
    </nav>

    <div class="content p-4" id="mainContent">
        <button class="btn btn-info d-md-none mb-3" type="button" id="sidebarCollapse">
            <i class="fas fa-bars"></i>
            <span>切换导航</span>
        </button>

        <!-- 仪表盘 (默认显示) -->
        <div id="dashboard-content" class="main-section">
            <h2>仪表盘</h2>
            <p>欢迎回来, <span id="adminName"></span>!</p>

            <div class="row mt-4">
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card border-left-primary shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                        学生总数</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="totalStudentsStat">加载中...</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-user-graduate fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card border-left-success shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                        班级总数</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="totalClassesStat">加载中...</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-users fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card border-left-info shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                        考试总数</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="totalExamsStat">加载中...</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-file-alt fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 新增快捷操作卡片 -->
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card border-left-danger shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                        快捷操作</div>
                                    <div class="mt-2">
                                        <button class="btn btn-sm btn-primary mb-2 w-100" onclick="document.querySelector('[data-target=\'student-management-content\']').click()">
                                            <i class="fas fa-user-plus mr-1"></i>新增学生
                                        </button>
                                        <button class="btn btn-sm btn-success mb-2 w-100" onclick="document.querySelector('[data-target=\'class-management-content\']').click()">
                                            <i class="fas fa-users-cog mr-1"></i>班级管理
                                        </button>
                                        <button class="btn btn-sm btn-info w-100" onclick="document.querySelector('[data-target=\'exam-management-content\']').click()">
                                            <i class="fas fa-file-alt mr-1"></i>考试管理
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 新增图表容器 -->
            <div class="row mt-4">
                <div class="col-xl-6 mb-4">
                    <div class="card shadow">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">各班级学生人数</h6>
                        </div>
                        <div class="card-body">
                            <div class="chart-container" style="position: relative; height:300px; width:100%">
                                <canvas id="classStudentCountChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 mb-4">
                    <div class="card shadow">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">近期考试平均分趋势</h6>
                        </div>
                        <div class="card-body">
                            <div class="chart-container" style="position: relative; height:300px; width:100%">
                                <canvas id="examAverageScoreChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 考试管理 -->
        <div id="exam-management-content" class="main-section" style="display: none;">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h2>考试管理</h2>
                <button class="btn btn-primary" data-toggle="modal" data-target="#examModal" id="addExamBtn"><i class="fas fa-plus mr-1"></i>新增考试</button>
            </div>
            
            <table class="table table-striped table-bordered">
                <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>考试名称</th>
                        <th>科目</th>
                        <th>考试时间</th>
                        <th>地点</th>
                        <th>描述</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="examTableBody">
                    <!-- 考试数据将动态插入此处 -->
                </tbody>
            </table>
        </div>

        <!-- 班级管理 -->
        <div id="class-management-content" class="main-section" style="display: none;">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h2>班级管理</h2>
                <button class="btn btn-primary" data-toggle="modal" data-target="#classModal" id="addClassBtn"><i class="fas fa-plus mr-1"></i>新增班级</button>
            </div>
            
            <table class="table table-striped table-bordered">
                <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>班级名称</th>
                        <th>班主任</th>
                        <th>学生人数</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="classTableBody">
                    <!-- 班级数据将动态插入此处 -->
                </tbody>
            </table>
        </div>

        <!-- 成绩管理 -->
        <div id="grade-management-content" class="main-section" style="display: none;">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h2>成绩管理</h2>
                <button class="btn btn-primary" data-toggle="modal" data-target="#gradeModal" id="addGradeBtn"><i class="fas fa-plus mr-1"></i>录入成绩</button>
            </div>
            <!-- Add a filter section for grades -->
            <form class="form-inline mb-3" id="gradeFilterForm">
                <div class="form-group mr-2">
                    <label for="filterExamId" class="mr-2">按考试筛选:</label>
                    <select class="form-control" id="filterExamId" name="filterExamId">
                        <option value="">所有考试</option>
                        <!-- Options will be populated by JS -->
                    </select>
                </div>
                <div class="form-group mr-2">
                    <label for="filterClassIdGrades" class="mr-2">按班级筛选:</label>
                    <select class="form-control" id="filterClassIdGrades" name="filterClassIdGrades">
                        <option value="">所有班级</option>
                        <!-- Options will be populated by JS -->
                    </select>
                </div>
                 <div class="form-group mr-2">
                    <label for="filterStudentNameGrades" class="mr-2">学生姓名:</label>
                    <input type="text" class="form-control" id="filterStudentNameGrades" placeholder="输入学生姓名">
                </div>
                <button type="button" class="btn btn-info" id="applyGradeFilterBtn">查询</button>
                <button type="button" class="btn btn-secondary ml-2" id="resetGradeFilterBtn">重置</button>
                 <button type="button" class="btn btn-success ml-auto" id="calculateStatsBtn">成绩统计</button>
            </form>
            <div id="gradeStatsContainer" class="mb-3"></div> <!-- For displaying statistics -->

            <table class="table table-striped table-bordered">
                <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>学号</th>
                        <th>学生姓名</th>
                        <th>考试名称</th>
                        <th>考试科目</th>
                        <th>分数</th>
                        <th>最后更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="gradeTableBody">
                    <!-- 成绩数据将动态插入此处 -->
                </tbody>
            </table>
        </div>

        <!-- 学生管理 -->
        <div id="student-management-content" class="main-section" style="display: none;">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h2>学生管理</h2>
                <button class="btn btn-primary" data-toggle="modal" data-target="#studentModal" id="addStudentBtn"><i class="fas fa-user-plus mr-1"></i>新增学生</button>
            </div>
             <!-- Add a filter section for students -->
            <form class="form-inline mb-3" id="studentFilterForm">
                <div class="form-group mr-2">
                    <label for="filterStudentName" class="mr-2">姓名:</label>
                    <input type="text" class="form-control" id="filterStudentName" name="name" placeholder="输入学生姓名">
                </div>
                <div class="form-group mr-2">
                    <label for="filterStudentNo" class="mr-2">学号:</label>
                    <input type="text" class="form-control" id="filterStudentNo" name="stuNo" placeholder="输入学号">
                </div>
                <div class="form-group mr-2">
                    <label for="filterClassIdStudents" class="mr-2">班级:</label>
                    <select class="form-control" id="filterClassIdStudents" name="classId">
                        <option value="">所有班级</option>
                        <!-- Options will be populated by JS -->
                    </select>
                </div>
                <button type="submit" class="btn btn-info" id="applyStudentFilterBtn">查询</button>
                <button type="button" class="btn btn-secondary ml-2" id="resetStudentFilterBtn">重置</button>
            </form>

            <table class="table table-striped table-bordered">
                <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>班级</th>
                        <th>电话</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="studentTableBody">
                    <!-- 学生数据将通过 JavaScript 动态加载 -->
                </tbody>
            </table>
            <!-- 添加分页容器 -->
            <div id="studentPagination" class="mt-3">
                <!-- 分页控件将通过 JavaScript 动态加载 -->
            </div>
        </div>
    </div>

    <!-- Bootstrap JS and dependencies -->
    <script src="js/jquery.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    
    <!-- Custom JS -->
    <script src="js/auth.js"></script>
    <script src="js/admin.js"></script>

    <!-- Exam Modal -->
    <div class="modal fade" id="examModal" tabindex="-1" aria-labelledby="examModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="examModalLabel">新增/编辑考试</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="examForm">
                        <input type="hidden" id="exam_id" name="exam_id">
                        <div class="form-group">
                            <label for="exam_name">考试名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="exam_name" name="exam_name" required>
                            <div class="invalid-feedback">考试名称不能为空。</div>
                        </div>
                        <div class="form-group">
                            <label for="subject">科目 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="subject" name="subject" required>
                            <div class="invalid-feedback">科目不能为空。</div>
                        </div>
                        <div class="form-group">
                            <label for="exam_time">考试时间 <span class="text-danger">*</span></label>
                            <input type="datetime-local" class="form-control" id="exam_time" name="exam_time" required>
                            <div class="invalid-feedback">考试时间不能为空。</div>
                        </div>
                        <div class="form-group">
                            <label for="location">地点 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="location" name="location" required>
                            <div class="invalid-feedback">地点不能为空。</div>
                        </div>
                        <div class="form-group">
                            <label for="description">描述</label>
                            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveExamBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Class Modal -->
    <div class="modal fade" id="classModal" tabindex="-1" aria-labelledby="classModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="classModalLabel">新增/编辑班级</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="classForm">
                        <input type="hidden" id="class_id" name="class_id">
                        <div class="form-group">
                            <label for="class_name">班级名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="class_name" name="class_name" required>
                            <div class="invalid-feedback">班级名称不能为空。</div>
                        </div>
                        <div class="form-group">
                            <label for="head_teacher">班主任 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="head_teacher" name="head_teacher" required>
                            <div class="invalid-feedback">班主任不能为空。</div>
                        </div>
                        <div class="form-group">
                            <label for="student_count">学生人数</label>
                            <input type="number" class="form-control" id="student_count" name="student_count" min="0">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveClassBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Student Modal -->
    <div class="modal fade" id="studentModal" tabindex="-1" aria-labelledby="studentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="studentModalLabel">新增/编辑学生</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="studentForm">
                        <input type="hidden" id="student_id_form" name="student_id_form"> <!-- Changed id to avoid conflict -->
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="stu_no">学号 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="stu_no" name="stu_no" required>
                                <div class="invalid-feedback">学号不能为空。</div>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="name">姓名 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" required>
                                <div class="invalid-feedback">姓名不能为空。</div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="gender">性别 <span class="text-danger">*</span></label>
                                <select class="form-control" id="gender" name="gender" required>
                                    <option value="">请选择...</option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                    <option value="其他">其他</option>
                                </select>
                                <div class="invalid-feedback">性别不能为空。</div>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="class_id_form">班级 <span class="text-danger">*</span></label> <!-- Changed id to avoid conflict -->
                                <select class="form-control" id="class_id_form" name="class_id" required>
                                    <option value="">请选择班级...</option>
                                    <!-- Options will be populated by JS from MOCK_CLASSES -->
                                </select>
                                <div class="invalid-feedback">班级不能为空。</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="phone">电话</label>
                            <input type="tel" class="form-control" id="phone" name="phone" pattern="[0-9]{11}">
                            <div class="invalid-feedback">请输入有效的11位手机号码。</div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary" id="saveStudentBtn">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Grade Modal (新增/编辑成绩模态框) -->
    <div class="modal fade" id="gradeModal" tabindex="-1" aria-labelledby="gradeModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="gradeModalLabel">录入成绩</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="gradeForm" novalidate>
                        <input type="hidden" id="grade_id">
                        
                        <div class="form-group">
                            <label for="grade_student_id">学生ID</label> 
                            <input type="number" class="form-control" id="grade_student_id" name="studentId" required placeholder="输入学生ID">
                            <div class="invalid-feedback" id="grade_student_feedback">
                                学生ID不能为空且必须是数字。
                            </div>
                        </div>
    
                        <div class="form-group">
                            <label for="grade_exam_id">考试</label> 
                            <select class="form-control" id="grade_exam_id" name="examId" required>
                                <option value="">请选择考试...</option>
                                <!-- Options will be populated by JS by populateExamDropdownForForm -->
                            </select>
                            <div class="invalid-feedback">
                                请选择一个考试。
                            </div>
                        </div>
    
                        <div class="form-group">
                            <label for="grade_score">分数</label>
                            <input type="number" class="form-control" id="grade_score" name="score" required placeholder="输入分数" min="0">
                            <div class="invalid-feedback">
                                分数不能为空，且必须是非负数。
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="saveGradeBtn" form="gradeForm">保存成绩</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 